  <template>
  <!-- 核查整改详情  -- 已办的  -->
  <view class="rectificHavetodoDet">
    <view class="wrapper">
      <view class="wrapper-item wrapper-zero">
        <view class="wrapper-facility">
          <view class="facility-item">
            <view class="line-hidden nameTitle">
              <text
                class="timeout"
                :class="options.type == 1 ? 'fiveOut' : 'offLineOut'"
              >
                {{ options.type == 1 ? "告警" : "离线" }}超时
              </text>
              {{ options.restaurantName }}-{{ options.deviceName }}
            </view>
          </view>

          <view class="facility-item">
            <view class="textAlign label">监测仪MN码：</view>
            <view class="value valueName">
              {{ options.deviceMonitorMn || "" }}
            </view>
          </view>
          <view class="facility-item">
            <view class="textAlign label">
              累计{{ options.type == 1 ? "告警" : "离线" }}时间：
            </view>
            <view class="value valueName">
              {{ parseInt(options.durationDate / 60) || "" }}
            </view>
          </view>
          <view class="facility-item">
            <view class="textAlign label">统计时段：</view>
            <view class="value valueName">
              {{ options.totalTime || "" }}
            </view>
          </view>
        </view>
      </view>

      <view class="wrapper-item wrapper-zero" style="padding-top: 0">
        <u-tabs
          :list="list"
          lineColor="#00C9AE"
          lineWidth="30"
          :current="activeIndex"
          :inactiveStyle="inactiveStyle"
          :activeStyle="{ color: '#030303' }"
          @click="tabsClick"
        ></u-tabs>

        <template v-if="activeIndex == 0">
          <view class="wrapper-facility" style="padding-top: 15rpx">
            <view class="facility-item">
              <view class="textAlign label">监管单位：</view>
              <view class="value valueName">
                {{ options.unitName || "" }}
              </view>
            </view>
            <view class="facility-item">
              <view class="textAlign label">核查民警：</view>
              <view class="value valueName">
                {{ options.policeUserName || "" }}
              </view>
            </view>
            <view class="facility-item">
              <view class="textAlign label">核查时间：</view>
              <view class="value valueName">
                {{ options.handleTime || "" }}
              </view>
            </view>
            <view class="facility-item" style="margin-bottom: 10rpx">
              <view class="textAlign label">现场核查照片：</view>
            </view>
            <view class="bottomClass spotImg">
              <view class="bcimg" v-for="item in scenePath" :key="item.id">
                <image :src="imgPrefix + item.path" mode="aspectFill"></image>
              </view>
            </view>
            <view class="facility-item">
              <view class="textAlign label">处理建议：</view>
            </view>
            <view class="bottomClass wordBreak">
              {{ options.handleDesc || "" }}
            </view>
          </view>
        </template>
        <template v-if="activeIndex == 1">
          <view class="wrapper-facility" style="padding-top: 15rpx">
            <view class="facility-item">
              <view class="textAlign label">回执时间：</view>
              <view class="value valueName">
                {{ options.receiptTime || "" }}
              </view>
            </view>
            <view class="facility-item" style="margin-bottom: 10rpx">
              <view class="textAlign label">回执图片照片：</view>
            </view>
            <view class="bottomClass spotImg">
              <view class="bcimg" v-for="item in scenePath" :key="item.id">
                <image :src="imgPrefix + item.path" mode="aspectFill"></image>
              </view>
            </view>
            <view class="facility-item">
              <view class="textAlign label">回执说明：</view>
            </view>
            <view class="bottomClass">{{ options.receiptDesc || "" }}</view>
          </view>
        </template>
      </view>
    </view>
  </view>
</template>

<script>
import { imagesPathList } from "@/api/api.js";
import { handleClickRouter, pvwImage, Toast, navBack } from "@/utils/util.js";

export default {
  data() {
    return {
      activeIndex: 0,
      baseImgUrl: this.$baseImgUrl,
      options: {},
      list: [
        {
          name: "核查信息",
          badge: {
            isDot: false,
          },
        },
        {
          name: "回执信息",
          badge: {
            isDot: false,
          },
        },
      ],
      imgPrefix: uni.getStorageSync("imgPrefix"),
      scenePath: [],
    };
  },
  onLoad(options) {
    this.options = JSON.parse(decodeURIComponent(options.data));
    this.getList();
  },
  methods: {
    handleClickRouter,
    pvwImage,
    tabsClick(item) {
      this.activeIndex = item.index;
      this.getList();
    },
    getList() {
      let data = { bizId: this.options.id };
      if (this.activeIndex == 0) {
        data.bizType = 4;
      } else {
        data.bizType = 5;
      }

      imagesPathList(data).then((res) => {
        if (res.code == 200) {
          this.scenePath = res.result;
        }
      });
    },
  },
};
</script>
 
<style>
page {
  background-color: #f8f9fb !important;
  height: 100%;
}
</style>
<style lang="scss" scoped>
.rectificHavetodoDet {
  flex: 1;
  background-color: #f8f9fb;
  //   margin-bottom: 50px;

  .wrapper {
    position: absolute;
    top: 20rpx;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 50px;
    // height: calc(100vh - 74px);
    // overflow-y: auto;

    .wrapper-item {
      margin-bottom: 2vh;
      padding: 35rpx 40rpx 10rpx;
      background-color: #ffffff;
      border-radius: 10rpx;
      width: 702rpx;

      .wrapper-bar {
        display: flex;
        justify-content: space-between;
        height: 40rpx;
        .wrapper-bartitle {
          font-size: 30rpx;
          font-weight: bold;
          text {
            display: inline-block;
            margin-left: 8px;
            color: #ababab;
            font-size: 28rpx;
          }
        }
      }
    }

    .wrapper-zero {
      .nameTitle {
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: bold;
      }

      .timeout {
        display: inline-block;
        margin-right: 8rpx;
        padding: 2rpx 8rpx;
        font-size: 26rpx;
        font-weight: 400;
        border-radius: 8rpx;
      }

      // 告警
      .fiveOut {
        color: #e85656;
        border: 1px solid #f8afaf;
        background: #ffdede;
      }

      // 离线
      .offLineOut {
        color: #f39835;
        background: #fef4e9;
        border: 1px solid #ffd3a4;
      }

      .label {
        width: auto;
      }

      .bottomClass {
        margin-bottom: 25rpx;
      }

      .spotImg {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .bcimg {
          margin-top: 16rpx;
          width: 200rpx;
          height: 200rpx;
          image {
            display: block;
            border-radius: 8rpx;
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
</style>
